<template>
  <div>
    <div class="header">
          <div class="txt-bor">
            <p>流水明细--这里的流水明细把现在的搬过来</p>
          </div>
          <el-table
                :data="tableData"
                style="width: 100%;margin-top: 10px;padding-bottom: 50px;"
                :border="false"
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#F2F6FF',color:'#5E81F4'}">
                <el-table-column
                  prop="date"
                  label="序号"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="类型"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="上传图片"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="pay"
                  label="备注"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="pay"
                  label="备注"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="pay"
                  label="金额"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="pay"
                  label="当前余额"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="pay"
                  label="时间"
                  align="center">
                </el-table-column>
              </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
    return {

      tableData: [{
            date: '螃蟹',
            name: '王者荣耀',
            num: '5',
            pay:'4325'
          }, {
            date: '螃蟹',
            name: '原神',
            num: '1',
            pay:'5624'
          },{
            date: '螃蟹',
            name: '穿越火线',
            num: '2',
            pay:'1454'
          }, {
            date: '螃蟹',
            name: '和平精英',
            num: '5',
            pay:'4325'
          },]

    }

  },

  methods: {
    MoveCheck(){
      this.open=true
    },
    tableRowClassName({row, rowIndex}) {
        if (rowIndex %2==1) {
          return 'warning-row';
        }
        return '';
      }
  }

  }
</script>

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
    background: #F2F6FF;
  }
::v-deep .el-table td.el-table__cell{
  border-bottom: none;
}
::v-deep .el-table th.el-table__cell.is-leaf{
  border-bottom: none;
}
::v-deep .el-table::before{
  height: 0;
}
.txt-bor {
  >p {

    opacity: 1;
    margin: 0 0 0 20px;
    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid #FF0000;
    padding-left: 10px;
    // margin-bottom: 15px;
    margin-left: 0;
    color: #FF0000;
  }
}

.header {
  min-height: 55px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
  margin-bottom: 15px;
  padding: 10px 20px;
  padding-top: 16px;

  >p {

    opacity: 1;
    margin: 0 0 0 20px;
    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    // margin-bottom: 15px;
    margin-left: 0;
  }
}
</style>
